<template>
  <view class="page-container">
    <view class="relative flex justify-end pr35rpx pt25rpx">
      <view class="relative">
        <u-badge :is-dot="true" bg-color="red" s :offset="[-1, 0]" absolute class="z-10" />
        <u-image width="50rpx" height="50rpx" :src="`${$url}/profile/upload/2024/11/19/消息托送_20241119172552A003.png`" />
      </view>
    </view>
    <view class="ma mb25rpx mt25rpx w650rpx flex items-center">
      <u-avatar size="70" :src="avatar" @click="previewImage" />
      <view class="ml30rpx">
        <view class="mb10rpx text-35rpx text-#121836 font-bold">
          {{ userName || 'Joker' }}
        </view>
        <view class="mb10rpx text-25rpx text-#121831 font-400">
          {{ stuCode || '202254335145' }}
        </view>
        <view class="flex items-center">
          <span class="text-20rpx text-#AAB0BA">55粉丝</span>
          <u-image width="30rpx" height="30rpx" :src="`${$url}/profile/upload/2024/11/20/积分@2x_20241120155255A004.png`" />
        </view>
      </view>
    </view>
    <u-grid :col="3" :border="false">
      <u-grid-item>
        <view class="text-center text-40rpx text-#282C38 font-bold">
          50
        </view>
        <view class="text-center text-25rpx text-#AAB0BA font-400">
          我的收藏
        </view>
      </u-grid-item>
      <u-grid-item>
        <view class="text-center text-40rpx text-#282C38 font-bold">
          108
        </view>
        <view class="text-center text-25rpx text-#AAB0BA font-400">
          我的点赞
        </view>
      </u-grid-item>
      <u-grid-item>
        <view class="text-center text-40rpx text-#282C38 font-bold">
          86
        </view>
        <view class="text-center text-25rpx text-#AAB0BA font-400">
          我的评论
        </view>
      </u-grid-item>
    </u-grid>
    <view v-if="!openId" class="ma mt25rpx w650rpx">
      <u-image :src="`${$url}/profile/upload/2024/11/19/会员卡_20241119172508A002.png`" width="100%" height="100rpx" @click="toBindWeChat" />
    </view>
    <view class="ma mt30rpx w650rpx rounded-10rpx bg-white shadow-sm">
      <view class="border-bottom flex items-center justify-between px30rpx py20rpx">
        <view class="flex items-center text-30rpx text-#1A1A1A font-bold">
          <view class="mr15rpx h32rpx w6rpx rounded-full bg-primary" />
          我的帖子
        </view>
        <view class="text-primary flex items-center text-26rpx">
          看帖子
          <u-icon name="arrow-right" size="24" color="var(--primary-color)" class="ml5rpx" />
        </view>
      </view>
      <view class="flex items-center justify-between p30rpx">
        <view class="relative mr20rpx flex-1 rounded-20rpx from-#FFF5F0 to-#FFF bg-gradient-to-br p25rpx">
          <view class="mb15rpx flex items-center justify-between">
            <text class="text-28rpx text-#333 font-medium">
              已点赞
            </text>
            <text class="text-24rpx text-#FF6128 font-bold">
              +12
            </text>
          </view>
          <view class="mb20rpx text-48rpx text-#121836 font-bold">
            2,818
          </view>
          <image
            :src="`${$url}/profile/upload/2024/11/20/icon／积分@2x_20241120214753A001.png`"
            class="absolute bottom-25rpx right-25rpx h50rpx w80rpx"
            mode="aspectFit"
          />
        </view>
        <view class="relative flex-1 rounded-20rpx from-#F0F9FF to-#FFF bg-gradient-to-br p25rpx">
          <view class="mb15rpx flex items-center justify-between">
            <text class="text-28rpx text-#333 font-medium">
              已评论
            </text>
            <text class="text-24rpx text-#4EBDEC font-bold">
              +6
            </text>
          </view>
          <view class="mb20rpx text-48rpx text-#121836 font-bold">
            512
          </view>
          <image
            :src="`${$url}/profile/upload/2024/11/20/积分兑换／icon@2x_20241120214818A002.png`"
            class="absolute bottom-25rpx right-25rpx h50rpx w80rpx"
            mode="aspectFit"
          />
        </view>
      </view>
    </view>
    <view class="ma mt25rpx h245rpx w650rpx rounded-10rpx bg-white shadow-sm">
      <view class="m25rpx pt25rpx text-30rpx text-#121836 font-500">
        其他服务
      </view>
      <u-grid :col="3" :border="false" class="m30rpx">
        <u-grid-item @click="toPassword">
          <u-image :src="`${$url}/profile/upload/2024/11/21/icon／任务@2x_20241121145349A001.png`" width="50rpx" height="50rpx" />
          <view>修改密码</view>
        </u-grid-item>
        <u-grid-item @click="toInfo">
          <u-image :src="`${$url}/profile/upload/2024/11/21/会员／icon@2x_20241121145441A002.png`" width="50rpx" height="50rpx" />
          <view>个人信息设置</view>
        </u-grid-item>
        <u-grid-item>
          <u-image :src="`${$url}/profile/upload/2024/11/21/购物袋@2x_20241121145517A003.png`" width="50rpx" height="50rpx" />
          <view>维修申请记录</view>
        </u-grid-item>
      </u-grid>
    </view>
    <view class="ma mt60rpx w650rpx">
      <u-button type="primary" shape="circle" @click="toLogin">
        退出登录
      </u-button>
    </view>
  </view>
</template>

<script setup lang='ts' name='user'>
import { $url } from '@/api';
import type { UserInfo } from '@/api/user/type';
import { useUserStore } from '@/store';
import useModal from '@/hooks/use-modal';

// 持久化
const userStore = useUserStore();
userStore.getUserInfo();
const userInfo = computed<UserInfo>(() => {
  return userStore.userInfo || {} as UserInfo;
});

onLoad(() => {
  // 页面显示时检查登录状态
  if (!userStore.getToken) {
    userStore.clearUserInfo();
    uni.navigateTo({
      url: '/subPages/user/login',
    });
  }
});

// 获取头像
const avatar = computed(() => {
  return `${$url}${userInfo.value?.avatar}`;
});
// 获取用户名
const userName = computed(() => {
  return userInfo.value?.userName;
});
// 获取学号
const stuCode = computed(() => {
  return userInfo.value?.stuCode;
});
// 获取openId
const openId = computed(() => {
  return userInfo.value?.openId;
});
// 退出登录
const toLogin = () => {
  useModal().showModal('确定要退出登录吗？', {
    title: '警告',
    confirmText: '确定',
    cancelText: '取消',
    showCancel: true,
  }).then((res: any) => {
    if (res.confirm) {
      userStore.clearUserInfo();
      uni.navigateTo({
        url: '/subPages/user/login',
      });
    }
  });
};

// 跳转个人信息
const toInfo = () => {
  uni.navigateTo({
    url: '/subPages/user/info',
  });
};

// 跳转绑定微信
const toBindWeChat = () => {
  uni.navigateTo({
    url: '/subPages/user/bindWeChat',
  });
};

// 预览头像图片
const previewImage = () => {
  uni.previewImage({
    urls: [avatar.value],
  });
};

// 跳转修改密码
const toPassword = () => {
  uni.navigateTo({
    url: '/subPages/user/password',
  });
};
</script>

<style lang='scss' scoped>
.page-container {
  min-height: 100vh;
  background:
  radial-gradient(circle at 50% 0%, #E2EFFF 0%, #FFFFFF 70%);
  background-blend-mode: overlay;
}
.icon-align {
  display: inline-block; /* 确保图标是行内块元素 */
  vertical-align: middle; /* 如果未使用 flex，可以手动对齐 */
  margin-left: 4px;       /* 图标与文字之间添加间距（可选） */
}
.border-bottom {
  border-bottom: 1rpx solid rgba(0,0,0,0.05);
}

:root {
  --primary-color: #0077FF;
}

.bg-primary {
  background-color: var(--primary-color);
}

.text-primary {
  color: var(--primary-color);
}
</style>
